<template>
    <div class="container">
        <div class="page-header">
            <div class="back-button">
                <el-button @click="$router.push('/main/biao')" icon="el-icon-back">返回</el-button>
            </div>
            <h1>工作表现评核表</h1>
            <div class="form-actions">
                <el-button type="primary" @click="submitForm" icon="el-icon-check">{{ isEdit ? '保存' : '提交'
                    }}</el-button>
                <el-button @click="resetForm" icon="el-icon-refresh">重置</el-button>
                <el-button type="primary" @click="goToList" icon="el-icon-document">列表</el-button>
                <el-button type="info" @click="handlePrint" icon="el-icon-printer">打印</el-button>
            </div>
        </div>

        <div class="main-content">

            <div class="print-content">
                <div class="print-header">
                    <h2>工作表现评核表</h2>
                </div>

                <el-form :model="employeeInfo" :disabled="isView" ref="employeeForm" :rules="rules"
                    label-position="right" class="evaluation-form">
                    <table border="1">
                        <tr>
                            <td>工号</td>
                            <td><el-input v-model="employeeInfo.employeeId" /></td>
                            <td>姓名</td>
                            <td><el-input v-model="employeeInfo.name" /></td>
                            <td>部门</td>
                            <td><el-input v-model="employeeInfo.department" /></td>
                        </tr>
                        <tr>
                            <td>职务</td>
                            <td><el-input v-model="employeeInfo.position" /></td>
                            <td>入厂日期</td>
                            <td>
                                <el-date-picker v-model="employeeInfo.entryDate" type="date" placeholder="选择日期"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" />
                            </td>
                            <td>直接上级</td>
                            <td><el-input v-model="employeeInfo.directSupervisor" /></td>
                        </tr>
                        <tr>
                            <td colspan="6" class="textarea-cell">
                                <div class="label-row">个人工作总结（可另附 A4 纸）:</div>
                                <el-input type="textarea" v-model="employeeInfo.personalSummary" :rows="4" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6" class="textarea-cell">
                                <div class="label-row">目前工作瓶颈：</div>
                                <el-input type="textarea" v-model="employeeInfo.workBottlenecks" :rows="3" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6" class="textarea-cell">
                                <div class="label-row">需上级或公司协助：</div>
                                <el-input type="textarea" v-model="employeeInfo.assistanceNeeded" :rows="3" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6" class="section-header">实际表现评估以下由部门考评</td>
                        </tr>
                        <tr>
                            <td class="evaluation-title">1)、工作效率：准时完成工作任务，积极主动调整提高效率</td>
                            <td colspan="5" class="radio-group-cell">
                                <el-radio-group v-model="employeeInfo.workEfficiency">
                                    <el-radio :label="1">未能接受</el-radio>
                                    <el-radio :label="2">可以接受</el-radio>
                                    <el-radio :label="3">全面接受/好</el-radio>
                                    <el-radio :label="4">良好</el-radio>
                                    <el-radio :label="5">极好</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td class="evaluation-title">2）、个人工作质量</td>
                            <td colspan="5" class="radio-group-cell">
                                <el-radio-group v-model="employeeInfo.workQuality">
                                    <el-radio :label="1">未能接受</el-radio>
                                    <el-radio :label="2">可以接受</el-radio>
                                    <el-radio :label="3">全面接受/好</el-radio>
                                    <el-radio :label="4">良好</el-radio>
                                    <el-radio :label="5">极好</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td class="evaluation-title">3）、沟通协调：沟通协调能力强，能独立处理工作中遇到的困难，能积极主动给各部门沟通协调，解决问题</td>
                            <td colspan="5" class="radio-group-cell">
                                <el-radio-group v-model="employeeInfo.communication">
                                    <el-radio :label="1">未能接受</el-radio>
                                    <el-radio :label="2">可以接受</el-radio>
                                    <el-radio :label="3">全面接受/好</el-radio>
                                    <el-radio :label="4">良好</el-radio>
                                    <el-radio :label="5">极好</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td class="evaluation-title">4）、劳动纪律：自觉遵守和维护公司考勤管理制度，遵守厂规厂纪。</td>
                            <td colspan="5" class="radio-group-cell">
                                <el-radio-group v-model="employeeInfo.laborDiscipline">
                                    <el-radio :label="1">未能接受</el-radio>
                                    <el-radio :label="2">可以接受</el-radio>
                                    <el-radio :label="3">全面接受/好</el-radio>
                                    <el-radio :label="4">良好</el-radio>
                                    <el-radio :label="5">极好</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td class="evaluation-title">5）团队合作：与同事和协作部门保持良好的合作，参与和支持团队工作，推进团队目标的达成(部门领导指定人员考评)</td>
                            <td colspan="5" class="radio-group-cell">
                                <el-radio-group v-model="employeeInfo.teamwork">
                                    <el-radio :label="1">未能接受</el-radio>
                                    <el-radio :label="2">可以接受</el-radio>
                                    <el-radio :label="3">全面接受/好</el-radio>
                                    <el-radio :label="4">良好</el-radio>
                                    <el-radio :label="5">极好</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6" class="section-header">表现总评</td>
                        </tr>
                        <tr>
                            <td colspan="6" class="radio-group-cell">
                                <el-radio-group v-model="employeeInfo.overallEvaluation">
                                    <el-radio :label="1">未能接受</el-radio>
                                    <el-radio :label="2">可以接受</el-radio>
                                    <el-radio :label="3">全面接受/好</el-radio>
                                    <el-radio :label="4">良好</el-radio>
                                    <el-radio :label="5">极好</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6" class="textarea-cell">
                                <div class="label-row">评核结果/意见：</div>
                                <el-input type="textarea" v-model="employeeInfo.evaluationResult" :rows="3" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="6" class="signature-row">
                                评核人：<el-input v-model="employeeInfo.assessor" class="signature-input" />
                            </td>
                        </tr>
                        <tr class="signature-section">
                            <td>部门主管：</td>
                            <td><el-input v-model="employeeInfo.departmentSupervisor" /></td>
                            <td>部门经理：</td>
                            <td><el-input v-model="employeeInfo.departmentManager" /></td>
                            <td>部长/总监：</td>
                            <td><el-input v-model="employeeInfo.departmentHead" /></td>
                        </tr>
                        <tr class="signature-section">
                            <td>总经理：</td>
                            <td><el-input v-model="employeeInfo.generalManager" /></td>
                            <td>人资主管/经理：</td>
                            <td><el-input v-model="employeeInfo.hrSupervisor" /></td>
                            <td>企业管理部部长：</td>
                            <td><el-input v-model="employeeInfo.enterpriseManagementHead" /></td>
                        </tr>
                    </table>

                    <div class="form-footer">
                        <div class="form-info">
                            <span>表单编号及版本：AM - JY - 027 A/1</span>
                            <span>保存期限：长期</span>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { getInfoApi, saveOrUpdateApi } from '@/api/gongzuobxhpb'

export default {
    data() {
        return {
            mode: 'add', // add, edit, view
            employeeInfo: {
                id: undefined,
                employeeId: '',
                name: '',
                department: '',
                position: '',
                entryDate: '',
                directSupervisor: '',
                personalSummary: '',
                workBottlenecks: '',
                assistanceNeeded: '',
                workEfficiency: '',
                workQuality: '',
                communication: '',
                laborDiscipline: '',
                teamwork: '',
                overallEvaluation: '',
                evaluationResult: '',
                assessor: '',
                departmentSupervisor: '',
                departmentManager: '',
                departmentHead: '',
                generalManager: '',
                hrSupervisor: '',
                enterpriseManagementHead: ''
            },
            rules: {
                employeeId: [{ required: true, message: '请输入工号', trigger: 'blur' }],
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
                position: [{ required: true, message: '请输入职务', trigger: 'blur' }],
                entryDate: [{ required: true, message: '请选择入厂日期', trigger: 'change' }],
                directSupervisor: [{ required: true, message: '请输入直接上级', trigger: 'blur' }]
            }
        }
    },
    computed: {
        isView() {
            return this.mode === 'view'
        },
        isEdit() {
            return this.mode === 'edit'
        }
    },
    created() {
        // 从路由参数获取模式和ID
        const { mode, id } = this.$route.query
        if (mode) {
            this.mode = mode
        }
        if (id) {
            this.getInfo(id)
        }
    },
    methods: {
        async getInfo(id) {
            try {
                const { data } = await getInfoApi(id)
                if (data) {
                    this.employeeInfo = {
                        ...this.employeeInfo,
                        ...data.data
                    }
                }
            } catch (error) {
                console.error('获取详情失败：', error)
                this.$message.error('获取详情失败')
            }
        },
        async submitForm() {
            if (this.isView) return

            try {
                await this.$refs.employeeForm.validate()

                await saveOrUpdateApi(this.employeeInfo)
                this.$message.success('保存成功')
                this.goToList()
            } catch (error) {
                if (error === false) {
                    this.$message.warning('请完善必填信息')
                    return
                }
                console.error('保存失败：', error)
                this.$message.error('保存失败')
            }
        },
        goToList() {
            this.$router.push('/main/renshi/zhaoping/gongzuobxhpb/gongzuobxhpbList').catch(err => {
                if (err.name !== 'NavigationDuplicated') {
                    throw err
                }
            })
        },
        goBack() {
            this.$router.push('/main/renshi/zhaoping').catch(err => {
                if (err.name !== 'NavigationDuplicated') {
                    throw err
                }
            })
        },
        resetForm() {
            if (this.isView) return

            this.$confirm('确定要重置表单吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$refs.employeeForm.resetFields()
                this.$message.success('表单已重置')
            }).catch(() => { })
        },
        handlePrint() {
            window.print()
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 100vh;
    position: relative;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    padding: 20px;
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    h1 {
        font-size: 24px;
        color: #2c3e50;
        margin: 0;
        font-weight: 600;
        position: relative;
        padding-bottom: 10px;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #409EFF, #67C23A);
            border-radius: 3px;
        }
    }
}

.back-button {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.main-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.form-actions {
    position: absolute;
    right: 20px;
    top: 35%;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.evaluation-form {
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #ebeef5;
        margin-bottom: 24px;

        td {
            padding: 12px;
            border: 1px solid #ebeef5;
            vertical-align: middle;

            &:first-child {
                background-color: #f8f9fa;
                font-weight: 500;
                color: #2c3e50;
                width: 160px;
                text-align: center;
            }
        }
    }

    .section-header {
        background-color: #f0f7ff;
        color: #1890ff;
        font-weight: bold;
        text-align: center;
        padding: 12px;
    }

    .evaluation-title {
        background-color: #f8f9fa;
        text-align: left;
        padding: 12px;
        line-height: 1.5;
    }

    .radio-group-cell {
        padding: 16px;

        .el-radio-group {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 10px;
        }
    }

    .textarea-cell {
        padding: 16px;

        .label-row {
            margin-bottom: 8px;
            color: #2c3e50;
            font-weight: 500;
        }
    }

    .signature-section {
        td {
            padding: 8px;
            text-align: center;

            &:nth-child(even) {
                text-align: left;
            }
        }
    }
}

.form-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ebeef5;

    .form-info {
        display: flex;
        justify-content: space-between;
        color: #606266;
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding: 16px;
    }

    .page-header {
        padding: 16px;
        margin-bottom: 20px;

        h1 {
            font-size: 20px;
        }
    }

    .main-content {
        padding: 16px;
    }

    .form-actions {
        flex-direction: column;

        .el-button {
            width: 100%;
        }
    }

    .evaluation-form {
        table {
            td {
                padding: 8px;
                font-size: 14px;

                &:first-child {
                    width: 120px;
                }
            }
        }

        .radio-group-cell {
            .el-radio-group {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    }
}

@media print {
    .container {
        margin: 0;
        padding: 0;
        background: none !important;
        min-height: auto;
    }

    .page-header,
    .form-actions,
    .back-button {
        display: none !important;
    }

    .main-content {
        padding: 0;
        background: none !important;
        box-shadow: none;
    }

    .print-header {
        text-align: center;
        margin-bottom: 20px;
        padding: 20px 0;
        border-bottom: 1px solid #ccc;

        h2 {
            font-size: 24px;
            font-weight: bold;
            margin: 0;
            color: #000;
        }
    }

    .evaluation-form {
        table {
            border: 1px solid #ccc;
            page-break-inside: auto;

            td {
                border: 1px solid #ccc;
                padding: 8px;
                font-size: 12px;
                color: #000;
                background-color: #fff !important;
            }
        }

        .section-header {
            background-color: #fff !important;
            color: #000;
            font-weight: bold;
            border-bottom: 1px solid #ccc;
        }

        .evaluation-title {
            background-color: #fff !important;
            color: #000;
        }

        .el-input__inner,
        .el-textarea__inner {
            border: none;
            padding: 0;
            font-size: 12px;
            color: #000;
            background: none !important;
        }

        .el-radio {
            margin-right: 20px;
            page-break-inside: avoid;

            .el-radio__label {
                color: #000;
            }

            .el-radio__input.is-checked .el-radio__inner {
                background-color: #000;
                border-color: #000;
            }
        }

        .radio-group-cell {
            .el-radio-group {
                display: flex;
                justify-content: space-around;
                flex-wrap: nowrap;
            }
        }
    }

    .form-footer {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #ccc;
        page-break-inside: avoid;

        .form-info {
            color: #000;
            font-size: 12px;
        }
    }

    @page {
        margin: 1cm;
        size: A4 portrait;
    }
    
  textarea {
    border: 0px !important;
  }
::v-deep input.el-input__inner {
    border: none !important;
  }
  ::v-deep textarea.el-textarea__inner {
    border: none !important;
    resize: none;
  }
  ::v-deep i.el-input__icon {
    display: none !important;
  }
}
</style>